import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Button,
  Image,
  TouchableOpacity,
  FlatList,
  ScrollView,
  SwipeableFlatList,
  TouchableHighlight,
} from 'react-native';
import {
  ActivityIndicator,
  Toast,
  Modal,
} from 'antd-mobile-rn';
import { connect } from 'react-redux';
import moment from 'moment';
import _ from 'lodash';

import * as employeesActions from './actions/employeesActions';
import { i18n } from '../../i18n';
import { scaleSize } from '../../utils/screen';
import FontText from '../components/FontText';
import RadioGroup from '../components/Radio';
import EmployeeModal from '../components/modal/EmployeeModal';

class Employees extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
    };
  }

  componentDidMount() {
    this.props.getEmployeeList();
  }

  goBack() {
    this.props.navigation.goBack();
  }

  renderActivityIndicator() {
    const { employees } = this.props;
    const needIndicator = employees.loading | employees.saving | employees.deleting;
    let indicatorText = '';

    if (employees.loading) {
      indicatorText = i18n.t('employees.indicator.loading');
    } else if (employees.saving) {
      indicatorText = i18n.t('employees.indicator.saving');
    } else if (employees.deleting) {
      indicatorText = i18n.t('employees.indicator.deleting');
    }

    return (
      <ActivityIndicator
        animating={needIndicator}
        toast
        size='small'
        text={indicatorText}
      />
    );
  }

  renderHeader() {
    const _styles = headerStyles;

    return (
      <View
        style={_styles.headerContainer}
      >
        <View
          style={_styles.headerLeftBox}
        >
          <TouchableOpacity
            activeOpacity = {0.8}
            onPress={() => this.goBack()}
            style={_styles.headerBack}
          >
            <FontText style={_styles.headerText} font={'book'}>&lt; </FontText>
            <FontText style={_styles.headerText} font={'book'}>{i18n.t('btns.back')}</FontText>
          </TouchableOpacity>
        </View>
        <View
          style={_styles.headerMiddleBox}
        >
          <RadioGroup
            selectIndex={0}
            valuChange={(index) => {}}
            radios={[i18n.t('employees.tab.employees'), i18n.t('employees.tab.roles')]}
            color='steelblue'
          />
        </View>
        <View
          style={_styles.headerRightBox}
        >
          <TouchableOpacity
           style={_styles.headerAdd}
           onPress={() => this.addEmployee()}
          >
            <FontText style={_styles.headerText} font={'book'}>{i18n.t('btns.add')}</FontText>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  renderEmployeesTable() {
    const { employees } = this.props;
    const _styles = employeesTableStyles;

    if (employees.employees.length === 0) {
      return null;
    }

    return (
      <View
        style={_styles.employeesTableContainer}
      >
        <View
          style={_styles.employeesTableRowLightGrey}
        >
          <View
            style={_styles.employeesTableColumn}
          >
            <FontText style={_styles.employeesTableText} font={'bold'}>
              {i18n.t('employees.table.header.name')}
            </FontText>
          </View>
          <View
            style={_styles.employeesTableColumn}
          >
            <FontText style={_styles.employeesTableText} font={'bold'}>
              {i18n.t('employees.table.header.phone')}
            </FontText>
          </View>
          <View
            style={_styles.employeesTableColumn}
          >
            <FontText style={_styles.employeesTableText} font={'bold'}>
              {i18n.t('employees.table.header.role')}
            </FontText>
          </View>
        </View>
        {this.renderEmployeesTableContent()}
      </View>
    );
  }

  renderEmployeesTableContent() {
    const { employees } = this.props;
    const _styles = employeesTableStyles;

    if (employees.employees.length === 0) {
      return null;
    }

    return (
      <SwipeableFlatList
        data={employees.employees}
        bounceFirstRowOnMount={true}
        maxSwipeDistance={160}
        keyExtractor={(item, index) => `key_${item.user_id}`}
        renderItem={(item) => this._renderEmployeeItem(item)}
        renderQuickActions={(item) => this._renderEmployeeItemActions(item)}
      />
    );
  }

  _renderEmployeeItem({ item, index }) {
    const _styles = employeesTableStyles;

    return (
      <View
        style={_styles.employeesTableRow}
      >
        <View
          style={_styles.employeesTableColumn}
        >
          <FontText style={_styles.employeesTableText} font={'book'}>{item.name}</FontText>
        </View>
        <View
          style={_styles.employeesTableColumn}
        >
          <FontText style={_styles.employeesTableText} font={'book'}>
            {
              item.mobile === null || item.mobile === undefined || item.mobile.length === 0 ?
              'N/A' :
              item.mobile
            }
          </FontText>
        </View>
        <View
          style={_styles.employeesTableColumn}
        >
          <FontText style={_styles.employeesTableText} font={'book'}>{item.group_name}</FontText>
        </View>
      </View>
    );
  }

  _renderEmployeeItemActions({ item, index }) {
    const _styles = employeesTableStyles;

    return (
      <View style={_styles.employeesTableActionsContainer}>
        <TouchableHighlight
          style={_styles.employeesTableActionButton}
          onPress={() => this.editEmployee(item)}
        >
          <FontText
            style={_styles.employeesTableActionButtonText}
            font={'bold'}
          >
            {i18n.t('btns.edit')}
          </FontText>
        </TouchableHighlight>
        <TouchableHighlight
          style={[_styles.employeesTableActionButton, _styles.employeesTableActionButtonDestructive]}
          onPress={() => this.deleteEmployeeConfirm(item.user_id)}
        >
          <FontText
            style={_styles.employeesTableActionButtonText}
            font={'bold'}
          >
            {i18n.t('btns.delete')}
          </FontText>
        </TouchableHighlight>
      </View>
    );
  }

  deleteEmployeeConfirm(userId) {
    Modal.alert('', i18n.t('employees.alert.deleteemployeemessage'), [
      { text: i18n.t('btns.cancel'), onPress: () => {}, style: 'cancel' },
      { text: i18n.t('btns.okText'), onPress: () => this.props.deleteEmployee(userId) },
    ]);
  }

  addEmployee() {
    this.props.addEmployee();
  }

  editEmployee(employee) {
    this.props.editEmployee(employee);
  }

  employeeModalSave(employee) {
    this.props.saveEmployee(employee);
  }

  employeeModalCancel() {
    this.props.cancelEditEmployee();
  }

  render() {
    const _styles = viewStyles;
    const { employees } = this.props;
    const showEmployeeModal = !_.isEmpty(employees.editingEmployee);

    return (
      <View
        style={_styles.employeesView}
      >
        {this.renderActivityIndicator()}
        {this.renderHeader()}
        {this.renderEmployeesTable()}
        <EmployeeModal
          show={showEmployeeModal}
          employee={employees.editingEmployee}
          onSave={(employee) => this.employeeModalSave(employee)}
          onCancel={() => this.employeeModalCancel()}
        />
      </View>
    );
  }
};

/* StyleSheet =============================================================== */

const viewStyles = StyleSheet.create({
  employeesView: {
    flex: 1,
    flexDirection: 'column',
  },
});

const headerStyles = StyleSheet.create({
  headerContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: scaleSize(80),
    borderBottomWidth: scaleSize(1),
    borderColor: 'grey',
  },
  headerLeftBox: {
    flex: 1,
    justifyContent: 'center',
  },
  headerBack: {
    paddingLeft: scaleSize(20),
    flexDirection: 'row',
  },
  headerBackArrow: {
    width: scaleSize(32),
    height: scaleSize(32),
  },
  headerMiddleBox: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerRightBox: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  headerAdd: {
    paddingRight: scaleSize(20),
    flexDirection: 'row',
  },
  headerText: {
    color: 'steelblue',
    fontSize: scaleSize(30),
  },
});

const employeesTableStyles = StyleSheet.create({
  employeesTableContainer: {
    flex: 1,
    flexDirection: 'column',
  },
  employeesTableRow: {
    paddingHorizontal: scaleSize(40),
    paddingVertical: scaleSize(20),
    flexDirection: 'row',
    justifyContent: 'space-between',
    borderBottomWidth: scaleSize(1),
    borderColor: 'grey',
    backgroundColor: '#F6F6F6',
  },
  employeesTableRowLightGrey: {
    paddingHorizontal: scaleSize(40),
    paddingVertical: scaleSize(20),
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: 'lightgray',
    borderBottomWidth: scaleSize(1),
    borderColor: 'grey',
  },
  employeesTableColumn: {
    flex: 1,
  },
  employeesTableText: {
    color: '#000',
    fontSize: scaleSize(30),
  },
  employeesTableActionsContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  employeesTableActionButton: {
    padding: 10,
    width: 80,
    backgroundColor: '#0000FF',
  },
  employeesTableActionButtonDestructive: {
    backgroundColor: '#FF0000',
  },
  employeesTableActionButtonText: {
    color: '#fff',
    textAlign: 'center',
  },
});

function mapStateToProps({ employees }) {
  return { employees };
}

export default connect(mapStateToProps, employeesActions)(Employees);